<template>
  <div>
    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <el-input placeholder="请输入购买人姓名" v-model="queryInfo.query" clearable @clear="getShopList">
            <el-button slot="append" icon="el-icon-search" @click="getShopList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <el-table style="margin-top: 25px;" :data="shopList" border stripe>
        <!--        索引列-->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品名" prop="shop.title"></el-table-column>
        <el-table-column label="商品图片" prop="imageList" width="300">
          <template slot-scope="scope">
            <div style="display: flex">
              <div style="margin-right: 15px" v-for="(item,index) in scope.row.imageList" :key="index">
                <el-image
                  style="width: 80px; height: 80px;border: 1px dashed #d9d9d9;border-radius: 6px;"
                  :src="item"
                  fit="cover" :preview-src-list="scope.row.imageList"></el-image>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品描述" prop="shop.content" width="250">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.shop.content" placement="bottom">
              <div class="contentToo" v-html="scope.row.shop.content"></div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="商品品质" prop="lity.listType"></el-table-column>
        <el-table-column label="商品原价" prop="shop.original"></el-table-column>
        <el-table-column label="商品价格" prop="shop.price"></el-table-column>
        <el-table-column label="商品浏览数" prop="shop.shopLook" width="120"></el-table-column>
        <el-table-column label="商品状态" prop="shop.shopSold">
          <!-- scope.row 就是当前行的信息 作用槽 -->
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.shop.shopSold == false">上架</el-tag>
            <el-tag type="warning" v-if="scope.row.shop.shopSold == true">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="商品卖方姓名" prop="uuser.username" width="120"></el-table-column>
        <el-table-column label="购买人真实姓名" prop="user.username" width="120"></el-table-column>
        <el-table-column label="购买人姓名" prop="name" width="120"></el-table-column>
        <el-table-column label="购买人电话" prop="phone" width="120"></el-table-column>
        <el-table-column label="收货地址" prop="address"></el-table-column>
        <el-table-column label="收货时间" prop="time"></el-table-column>
        <el-table-column label="订单状态" prop="orderType" width="100">
          <!-- scope.row 就是当前行的信息 作用槽 -->
          <template slot-scope="scope">
<!--            1.下单 2.发货 3.完成 4.用户取消 5.商家取消 6.用户评论 7.商家评论 8.退货 9.退货中 10.不同意退货-->
<!--            11.退货成功-->
            <el-tag v-if="scope.row.orderType == 1">下单</el-tag>
            <el-tag type="success" v-if="scope.row.orderType == 2">发货</el-tag>
            <el-tag type="info" v-if="scope.row.orderType == 3">完成</el-tag>
            <el-tag type="warning" v-if="scope.row.orderType == 4">用户取消</el-tag>
            <el-tag type="danger" v-if="scope.row.orderType == 5">商家取消</el-tag>
            <el-tag v-if="scope.row.orderType == 6">用户评论</el-tag>
            <el-tag type="success" v-if="scope.row.orderType == 7">商家评论</el-tag>
            <el-tag type="info" v-if="scope.row.orderType == 8">申请退货</el-tag>
            <el-tag type="warning" v-if="scope.row.orderType == 9">退货中</el-tag>
            <el-tag type="danger" v-if="scope.row.orderType == 10">不同意退货</el-tag>
            <el-tag v-if="scope.row.orderType == 11">退货成功</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单更新时间" prop="updateTime" width="180"></el-table-column>

        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <!--            修改-->
            <el-button type="primary" icon="el-icon-view" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[1, 2, 5, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog title="详情" :visible.sync="editDialogVisible" width="50%"
               @close="editDialogClosed">
      <div class="shopSin">
        <el-descriptions :column="1" size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              商品名称
            </template>
            {{shopSign.shop.title}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品描述
            </template>
            {{shopSign.shop.content}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品质量
            </template>
            <el-tag>{{shopSign.lity.listType}}成新</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品原价
            </template>
            {{shopSign.shop.original}}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品价钱
            </template>
            {{shopSign.shop.price}}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品图片
            </template>
            <el-image
              style="width: 80px; height: 80px;border: 1px dashed #d9d9d9;border-radius: 6px;margin-right: 5px"
              :src="item"
              fit="cover" v-for="(item,index) in list" :key="index" :preview-src-list="list"></el-image>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品卖方姓名
            </template>
            {{shopSign.uuser.username}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              购买人真实姓名
            </template>
            {{shopSign.user.username}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              购买人姓名
            </template>
            {{shopSign.name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              购买人电话
            </template>
            {{shopSign.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              购买人地址
            </template>
            {{shopSign.address}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              收货时间
            </template>
            {{shopSign.time}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单状态
            </template>
            <el-tag v-if="shopSign.orderType == 1">下单</el-tag>
            <el-tag type="success" v-if="shopSign.orderType == 2">发货</el-tag>
            <el-tag type="info" v-if="shopSign.orderType == 3">完成</el-tag>
            <el-tag type="warning" v-if="shopSign.orderType == 4">用户取消</el-tag>
            <el-tag type="danger" v-if="shopSign.orderType == 5">商家取消</el-tag>
            <el-tag v-if="shopSign.orderType == 6">用户评论</el-tag>
            <el-tag type="success" v-if="shopSign.orderType == 7">商家评论</el-tag>
            <el-tag type="info" v-if="shopSign.orderType == 8">申请退货</el-tag>
            <el-tag type="warning" v-if="shopSign.orderType == 9">退货中</el-tag>
            <el-tag type="danger" v-if="shopSign.orderType == 10">不同意退货</el-tag>
            <el-tag v-if="shopSign.orderType == 11">退货成功</el-tag>
          </el-descriptions-item>
          <el-descriptions-item v-if="shopSign.orderType == 11">
            <template slot="label">
              退货地址
            </template>
            {{sales.address}}
          </el-descriptions-item>
          <el-descriptions-item v-if="shopSign.orderType == 11">
            <template slot="label">
              退货时间
            </template>
            {{sales.time}}
          </el-descriptions-item>
          <el-descriptions-item v-if="shopSign.orderType == 11">
            <template slot="label">
              退货备注
            </template>
            {{sales.remark}}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'OrderList',
  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1, //当前页
        pageSize: 5 //每页最大数
      },
      total: 0,
      shopList:[],
      editDialogVisible:false,
      shopSign:{
        user:{},
        uuser:{},
        lity: {
          listType: ''
        },
        shop:{}
      },
      list:[],
      sales:{}
    };
  },
  created() {
    this.getShopList()
  },
  methods: {
    //最大数
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getShopList();
    },
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.getShopList();
    },
    async getShopList(){
      let that = this
      const { data: res } = await this.$http.get('order/getOrder', { params: this.queryInfo });
      if (res.flag == '200') {
        let serve = res.orderList
        var list = []
        serve.forEach(item => {
          var list = []
          if (item.shop.shopUrl.indexOf("<<tupian>>") > 0) {
            item.shop.shopUrl = item.shop.shopUrl.split("<<tupian>>")
            item.shop.shopUrl.forEach(item => {
              list.push(item)
            })
            this.$set(item, 'imageList', list)
          } else {
            list.push(item.shop.shopUrl)
            this.$set(item, 'imageList', list)
          }
          item.updateTime = that.formatDateTime(item.updateTime)
        })
        this.shopList = serve;
        // console.log(res.data);
        this.total = res.number;  //总记录数
        // console.log(this.total);
      }
    },
    editDialogClosed(){

    },
    async showEditDialog(id){
      let that = this
      let dataId = {
        id: id
      }
      const { data: res } = await this.$http.post('order/getOrderId', dataId);
      if(res.flag == "200") {
        let serve = res.orderList
        that.list = []
        serve.creatTime = this.formatDateTime(serve.creatTime)
        serve.updateTime = this.formatDateTime(serve.updateTime)
        if (serve.shop.shopUrl.indexOf("<<tupian>>") > 0) {
          serve.shop.shopUrl = serve.shop.shopUrl.split("<<tupian>>")
          serve.shop.shopUrl.forEach(item => {
            that.list.push(item)
          })
        } else {
          that.list.push(serve.shop.shopUrl)
        }
        that.shopSign = serve
        that.sales = {}
        if(serve.orderType == "11"){
          this.getSalesId(id)
        }
        this.editDialogVisible = true
      }
    },
    async getSalesId(id){
      let that = this
      let dataId = {
        id: id
      }
      const { data: res } = await this.$http.post('sales/getSalesId', dataId);
      if (res.flag == "200"){
        that.sales = {}
        let serve = res.sales
        that.sales = serve
      }
    },
    async orderClick(id, index, shopId){
      let that = this
      let dataId = {
        id: id,
        orderType: index,
        shopId: shopId
      }
      const { data: res } = await this.$http.post('order/updateOrderType', dataId);
      if (res.flag == "200"){
        that.getShopList();
      }
    },
  }
};
</script>

<style lang="less" scoped>
.contentToo{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
